<template>
  <section>
    <el-form label-width="80px" size="mini">
      <el-form-item label="标题">
        <el-input style="width: 200px" v-model="taskDefine.title" ></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-input style="width: 200px" v-model="taskDefine.type" ></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-radio v-model="taskDefine.grade" :label="grade.val" v-for="grade in gradeList" :key="grade.val">{{grade.name}}</el-radio>
      </el-form-item>
      <el-form-item label="客户端">
        <el-select v-model="taskDefine.clientId">
          <el-option v-for="client in clientList" :key="client.id" :value="client.id" :label="client.clientName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公开">
        <el-switch v-model="taskDefine.isPublic" />
      </el-form-item>
      <!--条件，数量，周期-->
      <el-form-item label="周期" v-if="taskDefine.isPublic" size="mini" >
        <div style="display: flex;flex-direction: column">
          <div class="cycle-box">
        <el-switch v-model="taskDefine.cycleType" active-color="#409EFF" inactive-color="#C0CCDA"
                   active-text="顺延" inactive-text="自然"
                   active-value="1" inactive-value="2" />
        </div>
          <div class="cycle-box">
        <el-input style="width: 200px" v-model="taskDefine.cycleNum" />
        </div>
          <div class="cycle-box">
        <el-radio-group v-model="taskDefine.cycleUnit">
          <el-radio v-for="unit in unitList" :key="unit.val" :label="unit.val">{{unit.name}}</el-radio>
        </el-radio-group>
        </div>
        </div>
      </el-form-item>
      <el-form-item label="领用数量" v-if="taskDefine.isPublic">
        <el-input style="width: 200px" v-model="taskDefine.limitNum" ></el-input>
      </el-form-item>
      <el-form-item label="标签" v-if="taskDefine.isPublic">
        <el-button size="mini" type="text" @click="showTagSet = !showTagSet">{{showTagSet?'收起':'设置'}}</el-button>
        <div v-if="showTagSet">
          <sel-label :test="taskDefine.publicLimit" v-on:confirmLabel="confirmLabel"></sel-label>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn(taskDefine)">{{taskDefine.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import selLabel from '@/components/labelManagement/selLabel/selLabel'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "editDefine",
    props:['taskDefine'],
    components:{selLabel},
    data(){
      return{
        clientList:[],
        showTagSet:false,
        gradeList:[
          {name:'普通用户',val:1},
          {name:'商户',val:5},
          {name:'管理员',val:10},
        ],
        unitList:[
          {name:'天',val:1},
          {name:'周',val:2},
          {name:'月',val:3},
          {name:'年',val:4},
        ]
      }
    },
    watch:{
      taskDefine(nv,ov){
        if(nv.id) this.init(nv)
      }
    },
    created(){
      console.log('看一哈传来了哈？？？',this.taskDefine)
      this.init(this.taskDefine)
      this.getClientList()
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(taskDefine){
        if(taskDefine.publicLimit){
          let array=[]
          let tmp=taskDefine.publicLimit.split('|')
          tmp.forEach(t=>{
            t=parseFloat(t)
            array.push(t)
          })
          taskDefine.publicLimit=array
        }
        console.log('看一眼吧。。。',taskDefine.publicLimit)
      },
      getClientList(){
        this.fetch({name:"getClientList"})
          .then(res=>{
            this.clientList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(define){
        console.log('看下提交了个啥？？？',define)
        return
        if(define.id){
          this.updateTaskDefine(define)
        }
        else this.createTaskDefine(define)
      },
      updateTaskDefine(data){
        this.fetch({name:"updateTaskDefine",data})
          .then(res=>{
            this.$message({type:'success',message:'更新成功！'})
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createTaskDefine(data){
        this.fetch({name:"createTaskDefine",data})
          .then(res=>{
            this.$message({type:'success',message:'新建成功！'})
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmLabel(e){
        console.log('看看最后选了啥？？？',e,this.taskDefine)
        this.taskDefine.publicLimit=JSON.stringify(e)
      }
    }
  }
</script>

<style scoped>
.cycle-box{
  margin: 5px 0;
}
</style>
